<template>
  <div>
    <div class="searchBox">
      <el-form
        :inline="true"
        :model="params"
        class="demo-form-inline"
        style="margin-top: 15px; margin-left: 20px"
      >
        <el-form-item label="标题">
          <el-input
            v-model="params.title"
            placeholder="按标题查找"
            class="block"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button icon="el-icon-search" @click="getList(1)" class="block"
            >查询</el-button
          >
          <el-button type="primary" icon="el-icon-plus" @click="add"
            >增加</el-button
          >
          <el-button type="danger" icon="el-icon-delete" @click="removeMore()"
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <div class="jzTable">
      <el-table
        :data="rows"
        stripe
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column prop="type" label="类型" width="100"></el-table-column>
        <el-table-column prop="img" label="图片" width="100">
          <template slot-scope="scope">
            <img
              style="width: 40px; height: 40px"
              v-if="scope.row.img"
              :src="scope.row.img"
            />
          </template>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="100">
        </el-table-column>
        <el-table-column prop="url" label="跳转地址" width="100">
        </el-table-column>
        <el-table-column prop="status" label="是否启用" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="#13ce66"
              inactive-color="#ff4949"
              @change="statusChange(scope.row)"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              style="margin-right: 16px"
              @click="edit(scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除此数据吗？"
              @confirm="remove(scope.row)"
            >
              <el-button
                slot="reference"
                type="danger"
                size="mini"
                icon="el-icon-delete"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination">
      <el-pagination
        @size-change="sizeChange"
        @current-change="getList"
        :current-page="params.pageNum"
        :page-sizes="[5, 10, 100, 200, 300, 400]"
        :page-size="params.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
    <BannerEdit @load="getList" ref="bannerEditer"></BannerEdit>
  </div>
</template>


<script>
import BannerEdit from './bannerEdit.vue'
export default {
  name: "shouyeBanner",
  components: {
    BannerEdit
  },
  data() {
    return {
      ///查询参数
      params: {
        title: "",
        type: "banner",
        pageNum: 1,
        pageSize: 10,
      },
      rows: [],
      total: 0,
      selecteds: [],
    };
  },
  methods: {
    add(){
      this.$refs.bannerEditer.add()
    },
    edit(row){
      this.$refs.bannerEditer.edit(row)
    },
    ///获取列表
    getList(pageNum) {
      if (pageNum) this.params.pageNum = pageNum;
      this.$http({
        url: "/admin/index",
        params: this.params,
      }).then((res) => {
        this.total = res.total;
        this.rows = res.rows;
      });
    },
    ///启用停用
    statusChange(row) {
      console.log(row);
      this.$http({
        url: "/admin/index",
        method: "PUT",
        data: {
          indexId: row._id,
          status: row.status,
        },
      }).then((res) => {
        if (res.errorMsg) {
          this.getList(1);
        }
      });
    },
    ///修改pageSize
    sizeChange(pageSize) {
      this.params.pageSize = pageSize;
      this.getList(1);
    },
    ///删除数据
    remove(row) {
      this.$http({
        url: "/admin/index",
        method: "DELETE",
        params: { indexId: row._id },
      }).then((res) => {
        if (!res.errorMsg) {
          this.getList(1);
        }
      });
    },
    handleSelectionChange(rows) {
      ///存储选中数据
      this.selecteds = rows;
    },

    ///批量删除
    removeMore() {
      ///获取被选中的数据
      let checkedRowsPromise = [];
      let success = [],
        fail = [];
      for (let i = 0; i < this.selecteds.length; i++) {
        checkedRowsPromise.push(
          new Promise((resolve) => {
            let row = this.selecteds[i];
            this.$http({
              url: "/admin/index",
              method: "DELETE",
              params: { indexId: row._id },
            }).then((res) => {
              if (!res.errorMsg) {
                success.push(row._id);
              } else {
                fail.push(row._id);
              }
              resolve();
            })
          })
        )
      }
      this.$confirm("此操作将删除选中的数据，是否继续？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        //删除
        Promise.all(checkedRowsPromise).then(() => {
          this.$message({
            message: `批量删除完成，成功删除${success.length}条数据，删除失败${fail.length}条数据`,
            duration: 3000,
          });
          this.getList(1);
        })
      })
    }
  },
  created() {
    this.getList();
  },
  mounted() {},
};
</script>

<style scope>
.searchBox {
  margin-left: 24px;
  width: 1045px;
  height: 71px;
  background: #fff;
  display: flex;
}
.jzTable {
  margin-left: 24px;
  width: 1045px;
  background: #fff;
  margin-top: 12px;
}
.pagination {
  margin-left: 24px;
}
</style>
